<template>
	<view class="overlay">
		<view class="bg-fff pop-cont">
			<view class="flex padding u-border-bottom">
				<image class="poster margin-right" src="../static/img/recommend2.jpg" mode="aspectFill"></image>
				<view class="">
					<view class="">
						草莓蛋糕
					</view>
					CaoMei
				</view>
			</view>
			<view class="flex justify-between padding u-border-bottom">
				<text>规格选择</text>
				<view class="spec-cont">
					1磅 1人食
					<text class="iconfont icon-xiala"></text>
					<view class="spec-list bg-fff my-shadow">
						<view class="padding-sm bg-grey" v-for="(item,index) in 3">
							2磅 2人食
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between padding">
				<text>数量选择</text>
				<u-number-box :min="1" :max="100" buttonSize="20"></u-number-box>
			</view>
			<view class="flex btn-cont">
				<view class="bg-grey padding">
					取消
				</view>
				<view class="bg-yellow padding">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"good-spec",
		data() {
			return {
				show:true
			};
		}
	}
</script>

<style lang="scss">
.overlay{
	position: fixed;
	height: 100vh;
	width: 100%;
	background-color: rgba(0,0,0,0.4);
	z-index: 10;
}
.pop-cont{
	position: absolute;
	top: 50%;
	left: 3%;
	width: 94%;
	box-sizing: border-box;
	transform: translateY(-50%);
}
.poster{
	height: 160upx;
	width: 160upx;
}
.btn-cont{
	view{
		width: 50%;
		text-align: center;
	}
}
.spec-cont{
	position: relative;
	.spec-list{
		position: absolute;
		right: 0;
		top: 70upx;
		z-index: 2;
		width: 400upx;
	}
}
</style>
